<template>
    <div>
        <el-pagination v-model:current-page="_pageNo" v-model:page-size="_pageSize"
            :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total"/>
    </div>
</template>

<script setup lang="ts">
import {ref,computed,watch } from 'vue';

// 接收父传子的自定义属性
const pageData = defineProps({
    pageSize:{type:Number,required:true},
    pageNo:{type:Number,required:true},
    total:{type:Number,required:true},
})

const _pageSize = ref(pageData.pageSize)
const _pageNo = ref(pageData.pageNo)

let emit = defineEmits<{(e:'pageChange',size:TypePage):void}>()
let pageMax = computed(()=>Math.ceil(pageData.total/_pageSize.value))

watch([_pageNo,_pageSize],()=>{
    if(_pageNo.value<=pageMax.value){
        emit('pageChange',{_pageNo:_pageNo.value,_pageSize:_pageSize.value})
    }
})

</script>

<style scoped lang="less">

</style> 